<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>

<!--[if IEMobile 7]><html class="no-js iem7 oldie linen"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js ie7 oldie linen" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js ie8 oldie linen" lang="en"><![endif]-->
<!--[if (IE 9)&!(IEMobile)]><html class="no-js ie9 linen" lang="en"><![endif]-->
<!--[if (gt IE 9)|(gt IEMobile 7)]><!--><html class="no-js linen" lang="en"><!--<![endif]-->

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>登陆页</title>
	<%@include file="/header.jsp" %>
	<!-- Login pages styles -->
	<link rel="stylesheet" media="screen" href="/css/login.css?v=1">
	<script type="text/javascript">
	
		$(function()
		{
			/*
			 * JS login effect
			 * This script will enable effects for the login page
			 */
				// Elements
			var doc = $('html').addClass('js-login'),
				container = $('#container'),
				formLogin = $('#form-login'),
	
				// If layout is centered
				centered;
	
			/******* EDIT THIS SECTION *******/
	
			/*
			 * AJAX login
			 * This function will handle the login process through AJAX
			 */
			formLogin.submit(function(event)
			{
				// Values
				var login = $.trim($('#login').val()),
					pass = $.trim($('#pass').val());
	
				// Check inputs
				if (login.length === 0)
				{
					// Display message
					formLogin.clearMessages();
					displayError('请输入用户名！！');
					return false;
				}
				else if (pass.length === 0)
				{
					// Remove empty login message if displayed
					//formLogin.clearMessages('请输入用户名！！');
					formLogin.clearMessages();
					// Display message
					displayError('请输入密码！！');
					return false;
				}
				else
				{
					// Remove previous messages
					formLogin.clearMessages();
	
					// Show progress
					//displayLoading('正在登陆...');
	
					// Stop normal behavior
					event.preventDefault();
	
					mylogin();
					/*
					 * This is where you may do your AJAX call, for instance:
					 * $.ajax(url, {
					 * 		data: {
					 * 			login:	login,
					 * 			pass:	pass
					 * 		},
					 * 		success: function(data)
					 * 		{
					 * 			if (data.logged)
					 * 			{
					 * 				document.location.href = 'index.html';
					 * 			}
					 * 			else
					 * 			{
					 * 				formLogin.clearMessages();
					 * 				displayError('Invalid user/password, please try again');
					 * 			}
					 * 		},
					 * 		error: function()
					 * 		{
					 * 			formLogin.clearMessages();
					 * 			displayError('Error while contacting server, please try again');
					 * 		}
					 * });
					 */
	
					// Simulate server-side check
					/* setTimeout(function() {
						document.location.href = './'
					}, 2000); */
				}
			});
	
			/******* END OF EDIT SECTION *******/
	
			// Handle resizing (mostly for debugging)
			function handleLoginResize()
			{
				// Detect mode
				centered = (container.css('position') === 'absolute');
	
				// Set min-height for mobile layout
				if (!centered)
				{
					container.css('margin-top', '');
				}
				else
				{
					if (parseInt(container.css('margin-top'), 10) === 0)
					{
						centerForm(false);
					}
				}
			};
	
			// Register and first call
			$(window).on('normalized-resize', handleLoginResize);
			handleLoginResize();
	
			/*
			 * Center function
			 * @param boolean animate whether or not to animate the position change
			 * @param string|element|array any jQuery selector, DOM element or set of DOM elements which should be ignored
			 * @return void
			 */
			function centerForm(animate, ignore)
			{
				// If layout is centered
				if (centered)
				{
					var siblings = formLogin.siblings(),
						finalSize = formLogin.outerHeight();
	
					// Ignored elements
					if (ignore)
					{
						siblings = siblings.not(ignore);
					}
	
					// Get other elements height
					siblings.each(function(i)
					{
						finalSize += $(this).outerHeight(true);
					});
	
					// Setup
					container[animate ? 'animate' : 'css']({ marginTop: -Math.round(finalSize/2)+'px' });
				}
			};
	
			// Initial vertical adjust
			centerForm(false);
	
			/**
			 * Function to display error messages
			 * @param string message the error to display
			 */
			function displayError(message)
			{
				// Show message
				var message = formLogin.message(message, {
					append: false,
					arrow: 'bottom',
					classes: ['red-gradient'],
					animate: false					// We'll do animation later, we need to know the message height first
				});
	
				// Vertical centering (where we need the message height)
				centerForm(true, 'fast');
	
				// Watch for closing and show with effect
				message.on('endfade', function(event)
				{
					// This will be called once the message has faded away and is removed
					centerForm(true, message.get(0));
	
				}).hide().slideDown('fast');
			}
			
			function mylogin() {
				$.ajax({
					url:"/login",
					type:"post",
					data:formLogin.serialize(),
					dataType:"json"
				}).done(function(data){
					if(data.isSuccess)
						window.location = "/main";
					else {
						formLogin.clearMessages();
						displayError('用户名或密码错误！！');
					}
				})
			}
	
			/**
			 * Function to display loading messages
			 * @param string message the message to display
			 */
			function displayLoading(message)
			{
				// Show message
				var message = formLogin.message('<strong>'+message+'</strong>', {
					append: false,
					arrow: 'bottom',
					classes: ['blue-gradient', 'align-center'],
					stripes: true,
					darkStripes: false,
					closable: false,
					animate: false					// We'll do animation later, we need to know the message height first
				});
	
				// Vertical centering (where we need the message height)
				centerForm(true, 'fast');
	
				// Watch for closing and show with effect
				message.on('endfade', function(event)
				{
					// This will be called once the message has faded away and is removed
					centerForm(true, message.get(0));
	
				}).hide().slideDown('fast');
			}
		});
	
		// What about a notification?
		/* notify('Alternate login', 'Want to see another login page style? Try the <a href="login-box.html"><b>box version</b></a> or the <a href="login-full.html"><b>full version</b></a>.', {
			autoClose: false,
			delay: 2500,
			icon: 'img/demo/icon.png'
		}); */
	
	</script>
</head>

<body>

	<div id="container">

		<hgroup id="login-title" class="large-margin-bottom">
			<h1 class="login-title-image">Developr</h1>
		</hgroup>

		<form method="post" action="" id="form-login">
			<ul class="inputs black-input large">
				<!-- The autocomplete="off" attributes is the only way to prevent webkit browsers from filling the inputs with yellow -->
				<li><span class="icon-user mid-margin-right"></span><input type="text" name="username" id="login" class="input-unstyled" placeholder="Login" autocomplete="off"></li>
				<li><span class="icon-lock mid-margin-right"></span><input type="password" name="password" id="pass" class="input-unstyled" placeholder="Password" autocomplete="off"></li>
			</ul>

			<button type="submit" class="button glossy full-width huge">Login</button>
			<!-- <h4>账号说明</h4>
        	<p>管理员：admin-----123456</p>
        	<p>老师：teacher-----123456</p>
        	<p>学生：student-----123456</p>
        	<p>专家：expert------123456</p>
        	<br><br> -->
		</form>

	</div>
</body>
</html>